<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <title th:utext="${site.getTitle()}">首页</title>
    <meta name="Keywords" content="keywords" th:content="${site.getFixKeyWord()}">
    <meta name="description" content="description" th:content="${site.getFixDescription()}">
    <style>
        #content-container:before {
            display: none;
        }

        /* clearfix */
        .grid:after {
            content: '';
            display: block;
            clear: both;
        }

        /* ---- grid-item ---- */
        .grid-item {
            width: 100%;
            word-break: break-all;
            word-wrap: break-word;
        }

        @media (min-width: 768px) {
            .grid-item {
                width: 260px;
                word-break: break-all;
                word-wrap: break-word;
            }
        }
    </style>
</head>
<body>
<ul id="mainnav-menu" class="list-group" layout:fragment="menu" th:include="fragments/common::menu('/')"></ul>
<div layout:fragment="content">
    <div class="row blogPost">
        <div class="grid">
            <div class="panel grid-item" th:each="blogPost:${blogList}">
                <div class="blogPost-content">
                    <div class="blogPost-title media-block">
                        <a href="#" class="btn-link" th:href="@{/blogPost/view/{postId}(postId=${blogPost.postId})}"
                           target="_blank">
                            <h2 th:utext="${blogPost.title}">标题</h2>
                        </a>
                    </div>
                    <div class="blogPost-body">
                        <p th:if="${blogPost.shotCont!=null and blogPost.shotCont.length()>0}"
                           th:text="${#strings.substring(blogPost.shotCont,0,T(java.lang.Math).min(100,blogPost.shotCont.length()-1))}">
                            短介绍</p>
                    </div>
                </div>
                <div class="blogPost-footer">
                    <div class="media-left" th:text="${#dates.format(blogPost.dateCreated,'YYYY-MM-dd')}">14 Days ago</div>
                    <div class="media-body text-right">
                        <i class="demo-pli-clock icon-fw text-main"></i><span
                            th:text="${#dates.format(blogPost.dateCreated,'HH:mm')}">9:25</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 hidden-xs">
            <div th:text="|展现${pageIndex}页 ,共计${totalPages}页,合计${total}条|"></div>
        </div>
        <div class="col-sm-7 col-xs-12 text-right">
            <ul class="pagination" th:replace="fragments/common::pager(${pageIndex},${totalPages},'/page/{page}')"/>
        </div>
    </div>
</div>
<div layout:fragment="footjs">
    <script src="//static.qintingfm.com/nifty/v2.9/plugins/masonry/masonry.pkgd.min.js"></script>
    <script src="//static.qintingfm.com/plugins/imagesloaded.pkgd.min.js"></script>
    <script>
        $(document).on('nifty.ready', function () {
            // init Masonry
            var $grid = $('.grid').masonry({
                itemSelector: '.grid-item',
                columnWidth: '.grid-item',
                gutter: 15
                // options...
            });
            $grid.imagesLoaded().progress(function () {
                $grid.masonry('layout');
            });
        });
    </script>
</div>
</body>
</html>